<template>
  <div class="table-toolbar">
    <!-- 左侧工具栏 -->
    <div class="toolbar-left">
      <slot name="left">
        <!-- 批量操作按钮 -->
        <template v-if="batchActions && batchActions.length">
          <button
            v-for="action in batchActions"
            :key="action.key"
            class="toolbar-button"
            :disabled="!selectedRows.length"
            @click="() => handleBatchAction(action)"
          >
            {{ action.label }}
          </button>
        </template>
      </slot>
    </div>

    <!-- 右侧工具栏 -->
    <div class="toolbar-right">
      <slot name="right">
        <!-- 刷新按钮 -->
        <button
          v-if="showRefresh"
          class="toolbar-button"
          @click="$emit('refresh')"
        >
          刷新
        </button>

        <!-- 密度设置 -->
        <div v-if="showDensity" class="density-dropdown">
          <button class="toolbar-button" @click="showDensityOptions = !showDensityOptions">
            密度
          </button>
          <div v-if="showDensityOptions" class="density-options">
            <div
              v-for="option in densityOptions"
              :key="option.value"
              class="density-option"
              @click="handleDensityChange(option.value)"
            >
              {{ option.label }}
            </div>
          </div>
        </div>

        <!-- 列设置 -->
        <div v-if="showColumnSetting" class="column-setting-dropdown">
          <button class="toolbar-button" @click="showColumnOptions = !showColumnOptions">
            列设置
          </button>
          <div v-if="showColumnOptions" class="column-options">
            <div
              v-for="col in columns"
              :key="col.dataIndex"
              class="column-option"
            >
              <input
                type="checkbox"
                :checked="!hiddenColumns.includes(col.dataIndex)"
                @change="toggleColumn(col.dataIndex)"
              >
              {{ col.title }}
            </div>
          </div>
        </div>
      </slot>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const props = defineProps({
  batchActions: {
    type: Array,
    default: () => []
  },
  selectedRows: {
    type: Array,
    default: () => []
  },
  columns: {
    type: Array,
    default: () => []
  },
  showRefresh: {
    type: Boolean,
    default: true
  },
  showDensity: {
    type: Boolean,
    default: true
  },
  showColumnSetting: {
    type: Boolean,
    default: true
  }
})

const emit = defineEmits(['refresh', 'density-change', 'columns-change', 'batch-action'])

// 密度设置
const showDensityOptions = ref(false)
const densityOptions = [
  { label: '紧凑', value: 'small' },
  { label: '默认', value: 'medium' },
  { label: '宽松', value: 'large' }
]

// 列设置
const showColumnOptions = ref(false)
const hiddenColumns = ref([])

// 处理密度变化
const handleDensityChange = (density) => {
  emit('density-change', density)
  showDensityOptions.value = false
}

// 处理列显示/隐藏
const toggleColumn = (columnKey) => {
  const index = hiddenColumns.value.indexOf(columnKey)
  if (index > -1) {
    hiddenColumns.value.splice(index, 1)
  } else {
    hiddenColumns.value.push(columnKey)
  }
  emit('columns-change', hiddenColumns.value)
}

// 处理批量操作
const handleBatchAction = (action) => {
  emit('batch-action', {
    action: action.key,
    rows: props.selectedRows
  })
}
</script>

<style scoped>
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
}

.toolbar-left,
.toolbar-right {
  display: flex;
  gap: 8px;
  align-items: center;
}

.toolbar-button {
  padding: 4px 12px;
  border: 1px solid #d9d9d9;
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}

.toolbar-button:hover {
  color: #1890ff;
  border-color: #1890ff;
}

.toolbar-button:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 下拉菜单样式 */
.density-dropdown,
.column-setting-dropdown {
  position: relative;
}

.density-options,
.column-options {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  padding: 4px 0;
  background: #fff;
  border: 1px solid #f0f0f0;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.density-option,
.column-option {
  padding: 5px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.density-option:hover,
.column-option:hover {
  background: #f5f5f5;
}

.column-option {
  display: flex;
  align-items: center;
  gap: 8px;
}
</style>